<template>
    <section class="container-tree">

        <section class="tree-bar">
            <div class="text">
                <i class="el-icon-menu" style="color:#324057"></i> 栏目树
            </div>
            <div class="tools">
                <i @click="handleReload" class="el-icon-refresh" style="color:#324057; cursor: pointer"></i>
            </div>
        </section>

        <section>
            <el-tree :data="tree" node-key="id" ref="tree"
                     v-loading="loading"
                     highlight-current
                     :check-strictly="true"
                     :props="defaultProps"
                     @node-click="handleNodeClick"
            ></el-tree>
        </section>
    </section>
</template>

<script>
    import { created, selectTree, getParents } from '@/api/cms/channel'
    export default {
        name: 'ChannelTree',
        data() {
            return {
                loading: false,
                tree: [],
                defaultProps: {
                    children: 'children',
                    label: 'channelName'
                }
            }
        },
        created() {
            this.getTreeData()
        },
        methods: {
            getTreeData() {//获取数据列表
                this.loading = true
                selectTree().then(response => {
                    this.tree = response.data
                    this.loading = false
                }).catch(error => {
                    console.log(error)
                    this.loading = false
                })
            },
            handleReload(){
                this.getTreeData()
            },
            handleNodeClick(data, node) {
                //调用父组件
                this.$emit('clickNode', node)

            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .tree-bar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        padding: 0 10px;
        border-bottom: 1px solid #d4dde2;
        .text{
        }
        .tools{
            .el-button--text{
                border:1px solid red;
                padding: 0;
            }
        }
    }
</style>